<template>
  <!-- 添加获奖的对话框 ********************************** -->
  <el-dialog
    title="添加获奖"
    :visible.sync="addDialogVisible"
    width="90%"
    @close="handleProjectAddDialogClose"
    center
    class="essayAddDialog"
  >
    <span>
      <el-row :gutter="20">
        <el-col :span="14"
          ><div class="grid-content bg-purple">
            <el-form
              ref="awardAddFormRef"
              :model="awardAddForm"
              :rules="awardAddFormRules"
              label-width="130px"
              size="mini"
            >
              <el-form-item label="获奖名称" prop="name">
                <el-input
                  placeholder="请输入获奖名称"
                  v-model="awardAddForm.name"
                ></el-input>
              </el-form-item>
              <!-- 获奖作者 -->
              <el-form-item label="获奖作者" prop="awardee">
                <el-input
                  @input="awardeeInputChange"
                  placeholder="多名获奖者使用逗号分隔"
                  v-model="awardAddForm.awardee"
                ></el-input>
              </el-form-item>
              <!--获奖第一人类型 -->
              <el-form-item label="获奖第一人类型" prop="first_awardee_type"
                ><el-input
                  placeholder="请输入获奖第一人类型"
                  v-model="awardAddForm.first_awardee_type"
                ></el-input>
              </el-form-item>
              <!-- 作者所属单位 -->
              <el-form-item label="作者所属单位" prop="awardee_unit">
                <el-select
                  v-model="awardAddForm.awardee_unit"
                  placeholder="请选择作者所属单位"
                >
                  <el-option
                    v-for="item in collegeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 成果名称 -->
              <el-form-item label="成果名称" prop="achievement_name">
                <el-input
                  placeholder="请输入成果名称"
                  v-model="awardAddForm.achievement_name"
                ></el-input>
              </el-form-item>
              <!-- 下达单位 -->
              <el-form-item label="下达单位" prop="release_unit">
                <el-select
                  v-model="awardAddForm.release_unit"
                  placeholder="请选择作者所属单位"
                >
                  <el-option
                    v-for="item in collegeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 获奖人数 -->
              <el-form-item label="获奖人数" prop="awardee_num">
                <el-input
                  type="number"
                  placeholder="请输入获奖人数"
                  v-model="awardAddForm.awardee_num"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <!-- 发证单位 -->
              <el-form-item label="发证单位" prop="award_unit">
                <el-input
                  placeholder="请输入下达单位"
                  v-model="awardAddForm.award_unit"
                ></el-input>
              </el-form-item>
              <!-- 奖励级别 -->
              <el-form-item label="获奖级别" prop="award_category">
                <el-select
                  v-model="awardAddForm.award_category"
                  placeholder="请选择获奖级别"
                >
                  <el-option
                    v-for="item in awardCategoryOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 获奖等级 -->
              <el-form-item label="获奖等级" prop="award_level">
                <el-select
                  v-model="awardAddForm.award_level"
                  placeholder="请选择获奖等级"
                >
                  <el-option
                    v-for="item in awardLevelOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 奖励方式 -->
              <el-form-item label="奖励方式" prop="award_type">
                <el-input
                  placeholder="请输入内容"
                  v-model="awardAddForm.award_type"
                >
                </el-input>
              </el-form-item>
              <!-- 获奖时间 -->
              <el-form-item label="获奖时间" prop="award_time">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="awardAddForm.award_time"
                    style="width: 100%"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
              <!-- 学科分类 -->
              <el-form-item label="学科分类" prop="subject_classification">
                <!-- options是数据 -->
                <el-cascader
                  placeholder="请选择学科分类"
                  v-model="subject_classificationVal"
                  :options="subject_classificationList"
                  :props="{ expandTrigger: 'hover' }"
                  @change="handleSubject_classificationChange"
                ></el-cascader>
              </el-form-item>
              <!-- 成果形式 -->
              <el-form-item label="成果形式" prop="achievement_type">
                <el-select
                  v-model="awardAddForm.achievement_type"
                  placeholder="请选择成果形式"
                >
                  <el-option
                    v-for="item in achievementTypeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 项目来源 -->
              <el-form-item label="项目来源" prop="project_source">
                <el-input
                  placeholder="请输入项目来源"
                  v-model="awardAddForm.project_source"
                ></el-input>
              </el-form-item>

              <el-form-item label="备注" prop="remarks">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="awardAddForm.remarks"
                >
                </el-input>
              </el-form-item>
            </el-form></div
        ></el-col>
        <!-- 上传模块 -->
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-upload
              ref="awardfileUploadRef"
              class="awardUpload"
              :auto-upload="false"
              drag
              action="http://localhost:3000/award/upload"
              method="post"
              :on-change="checkType"
              :on-success="uploadSuccess"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传.pdf/.png/.jpg文件，且不超过52mb
              </div>
            </el-upload>
          </div></el-col
        >
      </el-row>
    </span>
    <!-- 底部区域 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleAwardAddDialogConfirm"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      // 控制添加获奖对话框的显示与隐藏
      addDialogVisible: false,
      // 添加获奖的表单数据
      awardAddForm: {
        name: "",
        // 获奖作者
        awardee: "",
        // 第一获奖人类型
        first_awardee_type: "",
        // 作者所属单位
        awardee_unit: "",
        // 成果名称
        achievement_name: "",
        // 下达单位
        release_unit: "",
        // 获奖人数
        awardee_num: "",
        // 发证单位
        award_unit: "",
        // 获奖时间
        award_time: "",
        // 获奖级别
        award_category: "",
        // 获奖等级
        award_level: "",
        // 学科门类
        subject_classification: "",
        // 成果形式
        achievement_type: "",
        // 项目来源
        project_source: "",
        // 奖励类别
        award_type: "",
        // 附件
        awardfile: "",
        // 审批状态
        status: false,
        // 备注
        remarks: "",
      },
      // 添加获奖表单的验证规则对象
      awardAddFormRules: {
        name: [{ required: true, message: "请输入获奖名", trigger: "blur" }],
        awardee: [
          { required: true, message: "请输入获奖作者", trigger: "blur" },
        ],
        first_awardee_type: [
          {
            required: true,
            message: "请输入第一获奖作者类型",
            trigger: "blur",
          },
        ],
        awardee_unit: [
          {
            required: true,
            message: "请输入第一获奖人所属单位",
            trigger: "blur",
          },
        ],
        achievement_name: [
          { required: true, message: "请输入成果名称", trigger: "blur" },
        ],
        release_unit: [
          { required: true, message: "请输入下达单位", trigger: "blur" },
        ],
        awardee_num: [
          { required: true, message: "请输入获奖人数", trigger: "blur" },
        ],
        award_unit: [
          { required: true, message: "请输入发证单位", trigger: "blur" },
        ],
        award_time: [
          { required: true, message: "请输入获奖日期", trigger: "blur" },
        ],
        award_category: [
          { required: true, message: "请输入获奖级别", trigger: "blur" },
        ],
        award_level: [
          { required: true, message: "请输入获奖等级", trigger: "blur" },
        ],
        subject_classification: [
          { required: true, message: "请输入学科门类", trigger: "blur" },
        ],
        achievement_type: [
          { required: true, message: "请输入成果形式", trigger: "blur" },
        ],
        award_type: [
          { required: true, message: "请输入类别", trigger: "blur" },
        ],
        project_source: [
          { required: true, message: "请输入项目来源", trigger: "blur" },
        ],
      },
      isUploadFile: false,
      // // 获奖学科分类信息
      subject_classificationVal: [],
      // 作者单位学院信息
      awardee_unitVal: [],
      // 下达单位
      release_unitVal: [],
    };
  },
  methods: {
    // 选择学科分类选择
    handleSubject_classificationChange(val) {
      this.subject_classificationList.forEach((item) => {
        if (item.value == val[0]) {
          item.children.forEach((child) => {
            if (child.value == val[1]) {
              this.$set(
                this.awardAddForm,
                "subject_classification",
                `${item.label}-${child.label}`
              );
            }
          });
        }
      });
    },
    // 监听获奖作者input改变事件
    awardeeInputChange() {
      // 先变成数组 寻找到中文逗号改变成为英文逗号
      let cacheData = this.awardAddForm.awardee.split("");
      // console.log(cacheData.indexOf("a"));
      cacheData.forEach((item, index) => {
        if (item === "，") {
          // console.log(item);
          cacheData[index] = ",";
        }
      });
      this.awardAddForm.awardee = cacheData.join("");
      // console.log(this.awardAddForm.author);
    },
    // 监听添加获奖对话框的关闭事件
    handleProjectAddDialogClose() {
      this.addDialogVisible = false;
      this.$refs.awardAddFormRef.resetFields();
    },
    // 点击按钮，添加新获奖
    handleAwardAddDialogConfirm() {
      this.$refs.awardAddFormRef.validate(async (valid) => {
        if (!valid) return;
        if (!this.isUploadFile) return this.$message.warning("请上传文件");
        // 可以发起添加获奖的网络请求
        const { data: res } = await this.$axios.post("/award", {
          awardAddForm: this.awardAddForm,
        });

        if (res.status == 100) {
          return this.$refs.awardfileUploadRef.submit();
        } else {
          return this.$message.error(res.message);
        }
      });
    },
    // 获奖上传检查
    checkType(file) {
      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);

      if (!(fileType != "png" || fileType != "jpg")) {
        this.$message.error("文件格式不正确");
        return false;
      }
      if (file.size / 1024 / 1024 > 20) {
        this.$message.error("文件大小不能超过52M");

        return false;
      }
      this.isUploadFile = true;
    },
    uploadSuccess() {
      this.$message.success("添加成功！");
      // 隐藏添加获奖的对话框
      this.addDialogVisible = false;
      this.$bus.$emit("getAchievementList");
      this.handleProjectAddDialogClose();
    },
    handleAwardAddShow() {
      this.addDialogVisible = true;
    },
  },
  computed: {
    ...mapState([
      "subject_classificationList",
      "collegeList",
      "awardCategoryOption",
      "awardLevelOption",
      "achievementTypeOption",
    ]),
  },
  mounted() {
    this.$bus.$on("handleAwardAddShow", this.handleAwardAddShow);
  },
  beforeDestroy() {
    this.$bus.$off("handleAwardAddShow");
  },
};
</script>

<style lang="less" scoped>
// 添加获奖对话框
.essayAddDialog {
  /deep/.el-dialog {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
}

// 上传模块
.awardUpload {
  /deep/.el-upload {
    width: 100%;
  }
  /deep/.el-upload-dragger {
    width: 100%;
  }
}
</style>